<template>
  <div id="Xbo" class="Xbox">
    <el-button type="text" @click="dialogTableVisible = true">
      <img src="https://img4.tuhu.org/Images/Logo/baoma.png@30w_30h_100Q.png" alt />
      <span class="spone">请选择车型</span>
      <span class="sptwo el-icon-refresh-left"></span>
    </el-button>
    <el-dialog :visible.sync="dialogTableVisible">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="zzbox">
        <el-tab-pane label="选择品牌" name="second">
          <el-steps :active="progressIndex" simple>
            <el-step title="选品牌" icon="el-icon-edit"></el-step>
            <el-step title="选型号" icon="el-icon-upload"></el-step>
            <!-- <el-step title="步骤 3" icon="el-icon-picture"></el-step> -->
          </el-steps>
          <div class="tegLis">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="true"
              @close="handleClose(tag)"
            >{{tag}}</el-tag>
          </div>
          <div class="brandList">
            <ul v-show="progressIndex==1">
              <li v-for="item in PCarList" :key="item.id" @click="nextSelection(item.CarId,item.name)">
                <img :src="item.imgurl" alt />
                <span>{{item.name}}</span>
              </li>
            </ul>
            <ul v-show="progressIndex==2">
              <li v-for="item in XCarList" :key="item.id" @click="nextSelectionT(item.name)">
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </el-tab-pane>
        <el-tab-pane label="搜索" name="first">搜索</el-tab-pane>
      </el-tabs>
      
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      progressIndex: 1,
      activeName: "second",
      dialogTableVisible: false,
      dialogFormVisible: false,
      carIndexActive: 0,
      formLabelWidth: "120px",
      PCarList: [
        {
          CarId: "11",
          imgurl: "https://img2.tuhu.org/Images/Logo/qiya.png",
          name: "起亚"
        },
        {
          CarId: "12",
          imgurl: "https://img2.tuhu.org/Images/Logo/qiya.png",
          name: "起亚"
        }
      ],
      XCarList: [{ Xid: "1", name: "老百姓" }, { Xid: "2", name: "台铃" }],
      dynamicTags: [],
      inputVisible: false,
      inputValue: ""
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    nextSelection(data,carName) {
      // console.log(data);
      // this.progressIndex = data
      if (this.progressIndex < 2) this.progressIndex++;
      this.carIndexActive = data;
      this.dynamicTags.push(carName);
    },
    nextSelectionT(data) {
      console.log(data);
      // this.$store.mutations.cardataUpdata(data)
      // this.$store.commit("UserUpdata",data)
      this.dialogTableVisible=false;
    },
    refModel() {
      this.carIndexActive = 1;
      console.log("data");
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      this.progressIndex=1;
    }
  },
  components: {}
};
</script>

<style lang='scss' type="text/css">
#Xbo {
  .el-tabs__item .is-active {
    color: #869eb6 !important;
  }
  .el-step__title .is-finish {
    color: #869eb6 !important;
  }
  .bu1 {
    color: red !important !important;
  }
}
</style>

<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
 
.Xbox {
  display: inline;
  padding: 10px;
  background-color: $main-back-color;
  border-radius: 50px;
  img {
    height: 25px;
    position: relative;
    top: 5px;
  }
  .spone {
    color: black;
  }
  .sptwo {
    color: $main-color;
    font-weight: 800;
  }
  .zzbox {
    position: relative;
    top: -50px;
    font-size: 20px;
    .brandList {
      margin-top: 4px;
      li {
        border: 1px solid #bebebe;
        float: left;
        margin-left: 5px;
        padding: 5px 30px;
        padding-bottom: 10px;
        font-size: 18px;
        margin-top: 5px;
        cursor: pointer;
      }
    }
    .tegLis{
      margin-top: 5px;
    }
  }
}
</style>
